<template>
  <div :id="id" :style="{width: width,height:height}"></div>
</template>

<script>


import * as echarts from 'echarts'
import { debounce } from '../../utils/auth'
import { uuid } from 'vue-contextmenujs/src/util'

export default {
  name: 'echartsTemplate',
  data(){
    return{
      id:'',
      myChart:null,
    }
  },
  props:{
    option:{
      type:Object,
      default:()=>{}
    },
    width:{
      type:String,
      default: '20rpx'
    },
    height:{
      type:String,
      default: '10px'
    }
  },
  created() {
    this.id = uuid()
  },
  watch:{
    option:{
      handler(){
        this.myChart.setOption(this.option);
      },
      deep:true,
    },
    width(){
       this.setSize()
    },
    height(){
      this.setSize()
    }
  },
  mounted() {
// 基于准备好的dom，初始化echarts实例
    this.myChart = echarts.init(document.getElementById(this.id));
  },
  methods:{
    setSize(){
      this.$nextTick(()=>{
        this.myChart.resize()
      })

      }
  }
}
</script>

<style scoped>

</style>
